<template>
    <el-container id="app">
        <el-aside :style="{width: asideMenuWidth + 'px'}" :class="[isMenuCollapse?'menu-collapsed':'']">
            <el-container>
                <el-header height="50px" class="main-header">
                    <p style="font-weight: bold;overflow: hidden;white-space: nowrap;" v-if="!isMenuCollapse">
                        OUYEL管理系统</p>
                    <h4 v-else>OUYEL</h4>
                </el-header>
                <el-main class="[isMenuCollapse?'menu-collapsed':'']">
                    <vue-scroll :ops="vueScrollOps" style="width:100%;height:100%">
                        <el-menu default-active="2" :collapse="isMenuCollapse" background-color="#545c64"
                                 text-color="#fff"
                                 active-text-color="#ffd04b">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1" @click="tabAdd('UserList')">选项1</el-menu-item>
                                    <el-menu-item index="1-2" @click="tabAdd('RoleList')">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3" @click="tabAdd('HelloWorld')">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="1-4-1" @click="tabAdd('UserList1')">选项1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title" @click="tabAdd('UserList2')">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-document"></i>
                                <span slot="title" @click="tabAdd('UserList3')">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title" @click="tabAdd('UserList4')">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </vue-scroll>
                </el-main>
            </el-container>
        </el-aside>
        <el-main>
            <tabs ref="tabs">
                <template v-slot:tabsNavPrevButtons>
                    <el-tooltip class="item" effect="dark" :content="isMenuCollapse?'展开':'收起'" placement="bottom">
                        <el-button class="tabs-button tabs-icon-button" type="primary" @click="handleCollapse"
                                   :icon="handleCollapseIcon"></el-button>
                    </el-tooltip>
                </template>
                <template v-slot:tabsNavTools>
                    <el-tooltip class="item" effect="dark" :content="'全屏'" placement="bottom">
                        <el-button
                                :icon="isFullscreen?'iconfont icon-fullscreen-expand':'iconfont icon-fullscreen-shrink'"
                                class="tabs-button tabs-icon-button"
                                @click="clickFullscreen" type="primary"></el-button>
                    </el-tooltip>
                    <el-dropdown>
                        <el-button class="tabs-button" type="primary">
                            <el-avatar :size="25" :src="avatarSrc"></el-avatar>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item>双皮奶</el-dropdown-item>
                            <el-dropdown-item>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
                <template v-slot:tabsContent>
                        <router-view></router-view>
                </template>
            </tabs>
        </el-main>
    </el-container>
</template>

<script>
    import Tabs from './components/tabs/Tabs.vue'
    import ScreenFull from 'screenfull'

    export default {
        name: 'App',
        components: {
            Tabs
        },
        data() {
            return {
                transitionName: 'slide-left',
                isFullscreen: true,
                avatarSrc:
                    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                isMenuCollapse: false,
                handleCollapseIcon: 'el-icon-s-fold',
                asideMenuWidth: 210,
                vueScrollOps: {
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {
                        keepShow: true
                    },
                    bar: {
                        hoverStyle: true,
                        onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                        background: "#F5F5F5",//滚动条颜色
                        opacity: 0.5,//滚动条透明度
                        "overflow-x": "hidden"
                    }
                },
            }
        },
        methods: {
            clickFullscreen() {
                if (!ScreenFull.isEnabled) {
                    this.$message({
                        message: 'you browser can not work',
                        type: 'warning'
                    })
                    return false
                }
                ScreenFull.toggle()
                this.isFullscreen = ScreenFull.isFullscreen
            },
            handleCollapse(key, keyPath) {
                this.$nextTick().then(() => {
                    if (this.isMenuCollapse) {
                        this.asideMenuWidth = 210
                        this.handleCollapseIcon = 'el-icon-s-fold'
                    } else {
                        this.asideMenuWidth = 65
                        this.handleCollapseIcon = 'el-icon-s-unfold'
                    }
                    this.isMenuCollapse = !this.isMenuCollapse
                })
            },
            tabAdd(key) {
                let tab = {index: key, name: key, closable: true}
                this.$refs.tabs.tabAdd(tab);
            },
        },
    }
</script>

<style>
    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #nprogress .bar {
      background: #ecf0f5 !important;
    }
    .el-aside {
        transition: all .3s ease;
        background-color: rgb(84, 92, 100);
    }

    .__bar-is-vertical {
        right: -1px !important;
    }

    .__bar-is-horizontal {
        display: none !important;
    }

    .main-header {
        background-color: #367fa9;
        color: #fff;
        align-items: center;
        display: flex;
        justify-content: center;
        font-size: 20px;
    }

    .menu-collapsed {
        overflow-x: hidden;
    }

    .el-aside {
        overflow: hidden;
    }

    .el-aside .el-container {
        height: 100vh;
    }

    .el-menu {
        border-right: unset;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .el-main {
        padding: 0;
        margin: 0;
        overflow-y: hidden;
    }

    /*
 * 下面这几个样式可以自定义头部样式
 */
    .oy-tabs .el-tabs__nav-scroll {
        background-color: #3c8dbc;
    }

    .oy-tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
        border-bottom: unset !important;
        border-left: unset !important;
    }

    .oy-tabs .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: unset;
    }

    .oy-tabs .el-tabs__item {
        color: #FFF;
    }

    .oy-tabs-nav {
        border: unset !important;
    }

    .oy-tabs-nav .el-tabs__item {
        height: 50px;
        line-height: 50px;
    }

    .oy-tabs .el-tabs__item.is-active {
        background: #367fa9;
        border-color: #367fa9;
    }

    .tabs-button {
        height: 50px;
        background-color: #3c8dbc;
        border: unset;
    }

    .tabs-icon-button {
        width: 42px;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .tabs-nav-prev, .tabs-nav-next {
        color: white !important;
    }

    .tabs-button:hover, .tabs-button:focus, .tabs-nav-prev:hover, .tabs-nav-next:hover {
        background: #367fa9;
        border-color: #367fa9;
        color: #FFF;
    }
</style>
